<template>
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/overview' }">
            <h3>首页</h3>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
            <h3>接口详情</h3>
        </el-breadcrumb-item>

    </el-breadcrumb>

    <!-- 添加一个卡片  -->
    <el-card class="box-card">

        <el-form :model="form">

            <el-form-item label="请求">
                <el-col :span="3">
                    <el-select v-model="form.region" placeholder="请求类型">
                        <el-option label="GET" value="GET" />
                        <el-option label="POST" value="POST" />
                    </el-select>
                </el-col>

                <el-col :span="17">
                    <el-input v-model="form.name" placeholder="please input url add" />
                </el-col>

            </el-form-item>

            <el-divider border-style="dashed" />

            <el-form-item>
                <el-col :span="0.8">

                </el-col>

                <el-col :span="20">
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" :span="17">
                        <el-tab-pane label="Params" name="Params">
                            Params
                            <el-table :data="ParamstableData" border style="width: 100%">
                                <el-table-column prop="params" label="参数名" width="180" />
                                <el-table-column prop="type" label="类型" width="180" />
                                <el-table-column prop="marks" label="备注" />
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="Body" name="Body">
                            Body json格式
                            <el-input v-model="form.body" type="textarea" />

                        </el-tab-pane>
                        <el-tab-pane label="Header" name="Header">
                            Header
                            <el-table :data="HeadertableData" border=true style="width: 100%">
                                <el-table-column prop="params" label="参数名" width="180" />
                                <el-table-column prop="type" label="类型" width="180" />
                                <el-table-column prop="address" label="必填" />
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="Cookies" name="Cookies">Cookies
                            <el-table :data="CookiestableData" border=true style="width: 100%">
                                <el-table-column prop="params" label="参数名" width="180" />
                                <el-table-column prop="type" label="类型" width="180" />
                                <el-table-column prop="address" label="必填" />
                            </el-table>

                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-form-item>





            <!-- 
            <el-form-item label="参数">
                <el-col :span="3">

                    <el-input v-model="form.params1" />

                </el-col>

                <el-col :span="17">
                    <el-input v-model="form.name" />
                </el-col>


            </el-form-item>
 -->


            <el-divider border-style="dashed" />
            <el-form-item label="测试结果">

                <el-col :span="20" :offset="0.8">
                    <el-input v-model="form.result" type="textarea" />

                </el-col>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">执行</el-button>
                <el-button>取消</el-button>
                <el-button type="primary" @click="onSave"> 保存</el-button>
            </el-form-item>



        </el-form>


        <!-- 对话框 -->
        <el-dialog v-model="dialogFormVisible" title="测试用例详情">
            <el-form :model="form">
                <el-form-item label="测试用例详情">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="测试用例集合归属">
                    <el-select v-model="form.region" placeholder="测试用例集合归属">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="测试用例项目归属">
                    <el-select v-model="form.region2" placeholder="请选择归属的项目">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>

                </el-form-item>


            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="handlersure">确认</el-button>
                </span>
            </template>
        </el-dialog>

    </el-card>



</template>
  
  <script setup>
//ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性
//   1、scope.$index 代表拿到每一行的index
// 2、scope.row代表拿到每一行的数据
//    响应式数据  ref
// const obj = reactive({ name: "name" });
import { ref, reactive } from 'vue'               //处理响应式数据 ,需要导入
//   import { findlerelement } from '../../../api/pro_api'
import { ArrowRight } from '@element-plus/icons-vue'    //图标显示引用

// 添加用户 传参 
const form = reactive({
    name: '',
    region: '',
    region2:'',
    delivery: false,
    type: [],
    resource: '',
    result: '',    //结果
})

const options = ref([
    {
        'label': "proj1",
        'value': 'proj1'
    }
])


// 对话框是否显示
const dialogFormVisible = ref(false)

const activeName = ref("Params")

// 执行发送请求
const onSubmit = () => {
    console.log('run!')
}


// 点击切换的事件处理 
function handleClick(tab, event) {

    console.log('handleclick');
    console.log(tab, event);
    console.log(tab.props.name);
}


//  ParamstableData 传递数据
// const ParamstableData = reactive({
// 'params':"",
// 'type':'',
// 'marks':''

// })

// //  HeadertableData 传递数据
// const HeadertableData = reactive({
//     'params':"",
//     'type':'',
//     'address':''

// })


// //  CookiestableData 传递数据
// const CookiestableData = reactive({
//     'params':"",
//     'type':'',
//     'address':''

// })



// 保存归属到哪个项目下,dialog弹出
function onSave() {
    // console.log(form.name);
    dialogFormVisible.value = true

}


// const webautorules = reactive({
//     type1: [
//         {
//             required: true,            //是否是必须的
//             message: 'Please choose one',
//             trigger: 'blur',       //离开这个焦点的时间触发
//         }
//     ],
//     elementpath1: [
//         {
//             required: true,            //是否是必须的
//             message: 'Please input',
//             trigger: 'blur',       //离开这个焦点的时间触发
//         }
//     ]

// })

// // 触发请求后, 数据
// const ruleFormRef = ref(null)

// // 提交
// function onSubmit() {

//     console.log("onSubmit")


//     ruleFormRef.value.validate(isValid => {              //只有在校验正确的情况下,才触发请求
//         if (isValid) {

//             //添加元素,向后台进行请求
//             findlerelement(ruleFormmodel).then(res => {
//                 console.log(res)

//             })
//         }
//         else {
//             // ElMessage({
//             //     message: '请输入正确的信息再提交',
//             //     type: 'warning',
//             // })
//         }
//         // 清空form中的内容
//         onreset()

//     }
//     )
// }


// 重置

// function onreset() {

//     console.log(ruleFormRef)
//     ruleFormRef.value.resetFields()

// }




</script > 
  
  <style lang="less" scoped>
  .demo-tabs>.el-tabs__content {
      padding: 32px;
      color: #6b778c;
      font-size: 32px;
      font-weight: 600;
  }
  
  .box-card {
      height: 100%;
  }
  </style>